
<!-- template - 注册页面组件 -->

<template>
  <div id="poster">

    <!-- form - 注册账号信息填写 -->
    <el-form class="register-container" :rules="rules" ref="registerForm" :model="registerForm" label-position="left" label-width="0px">
      <h3 class="register-title">注册账号</h3>
      <el-form-item prop="name">
        <el-input type="text" v-model="registerForm.name" placeholder="姓名"></el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input type="password" v-model="registerForm.password" placeholder="密码"></el-input>
      </el-form-item>
      <el-form-item prop="confirmPassword">
        <el-input type="password" v-model="registerForm.confirmPassword" placeholder="确认密码"></el-input>
      </el-form-item>
      <el-form-item prop="phone">
        <el-input type="text" v-model="registerForm.phone" placeholder="电话"></el-input>
      </el-form-item>
      <el-form-item prop="email">
        <el-input type="text" v-model="registerForm.email" placeholder="邮箱"></el-input>
      </el-form-item>
      <el-form-item prop="identity">
        <el-radio-group style=" display:flex; justify-content: center; width: 100%" v-model="registerForm.identity">
          <el-radio label="student">学生</el-radio>
          <el-radio label="admin">管理员</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item>
        <div style=" display :flex; justify-content: center; width: 100%">
          <!-- button 注册或取消注册 -->
          <el-button type="primary" style="width: 30%;background: #505458;border: none" @click="submitForm('registerForm')">注册</el-button>
          <el-button type="primary" style="width: 30%;background: #505458;border: none" @click="cancel">取消</el-button>
        </div>
      </el-form-item>
    </el-form>

  </div>
</template>

<script>

export default {
  name: 'Register',
  data() {
    //输入信息格式判断
    var checkPassword = (rule, value, callback) => {
      var reg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$/;
      if (this.registerForm.password === '' || this.registerForm.password === null) {
        callback(new Error('请输入密码'));
      } else if (!reg.test(this.registerForm.password)) {
        callback(new Error('密码格式不正确'));
      } else {
        if (this.registerForm.confirmPassword !== '') {
          this.$refs.registerForm.validateField('checkPassword');
        }
        callback();
      }
    }
    var checkConfirmPassword = (rule, value, callback) => {
      if (this.registerForm.confirmPassword === '' || this.registerForm.confirmPassword === null) {
        callback(new Error('请再次输入密码'));
      } else if (this.registerForm.confirmPassword !== this.registerForm.password) {
        callback(new Error('两次输入密码不一致!'));
      } else {
        callback();
      }
    }
    var checkName = (rule, value, callback) => {
      if (this.registerForm.name === '' || this.registerForm.name === null) {
        callback(new Error('请输入姓名'));
      } else {
        callback();
      }
    }
    var checkPhone = (rule, value, callback) => {
      var reg = /[0-9]{11}$/;
      if (this.registerForm.phone === '' || this.registerForm.phone === null) {
        callback(new Error('请输入手机号'));
      } else if (!reg.test(this.registerForm.phone)) {
        callback(new Error('手机号格式不正确，需要为11位数字'));
      } else {
        callback();
      }
    }
    var checkEmail = (rule, value, callback) => {
      var reg = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
      if (this.registerForm.email === '' || this.registerForm.password === null) {
        callback(new Error('请输入邮箱'));
      } else if (!reg.test(this.registerForm.email)) {
        callback(new Error('邮箱格式不正确'));
      } else {
        callback();
      }
    }
    var checkIdentity = (rule, value, callback) => {
      if (this.registerForm.identity === '' || this.registerForm.identity === null) {
        callback(new Error('请选择身份'));
      } else {
        callback();
      }
    }
    return {
      registerForm: {
        id: null,
        name: '',
        password: '',
        confirmPassword: '',
        phone: '',
        email: '',
        identity: ''
      },
      rules: {
        name: [
          { validator: checkName, trigger: 'blur' }
        ],
        password: [
          { validator: checkPassword, trigger: 'blur' }
        ],
        confirmPassword: [
          { validator: checkConfirmPassword, trigger: 'blur' }
        ],
        phone: [
          { validator: checkPhone, trigger: 'blur' }
        ],
        email: [
          { validator: checkEmail, trigger: 'blur' }
        ],
        identity: [
          { validator: checkIdentity, trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    //提交表单
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$http
            .post("/register", {
              name: this.registerForm.name,
              password: this.registerForm.password,
              phone: this.registerForm.phone,
              email: this.registerForm.email,
              identity: this.registerForm.identity
            })
            .then(response => {
              switch (response.data.errno){
                case 1: { // 注册成功
                  this.registerForm.id = response.data.data
                  console.log('register successfully\n', this.registerForm);
                  this.goMainPage();
                  break;
                }
                case 19: {
                  ElMessage({type: 'error', message: '用户注册失败，参数不合法'});
                  break;
                }
                case 10: {
                  ElMessage({type: 'error', message: '缺少必要参数'});
                  break;
                }
              }
            })
        } else {
          return false;
        }
      });
    },
    //注册成功 初始化用户信息 
    goMainPage() {
      sessionStorage.setItem("userInfo", JSON.stringify(this.registerForm));
      //跳转主页面
      switch (this.registerForm.identity) {
        case 'student': {
          this.$router.replace({ path: '/student/projects' })
          break;
        }
        case 'admin': {
          this.$router.replace({ path: '/admin/manageUser' })
          break;
        }
      }
    },
    //取消注册 跳转登录页面
    cancel() {
      this.$router.replace({ path: '/' })
    }
  }
}
</script>

<style>
#poster {
  background: url("@/assets/logininterface.png") no-repeat center;
  height: 100%;
  width: 100%;
  background-size: cover;
  position: fixed;
}

body {
  margin: 0px;
}

.register-container {
  border-radius: 15px;
  background-clip: padding-box;
  margin-top: 160px;
  margin-left: 250px;
  width: 300px;
  padding: 35px 35px 15px 35px;
  background: #fff;
  border: 1px solid #eaeaea;
  box-shadow: 0 0 25px #cac6c6;
}

.register-title {
  margin: 0px auto 40px auto;
  text-align: center;
  color: #505458;
}
</style>

